<!--
 * @Descripttion: 
 * @Author: linzisong
 * @Date: 2021-07-05 17:19:25
 * @LastEditors: linzisong
 * @LastEditTime: 2021-07-08 14:53:08
-->
<template>
  <div>
    <template>
      <form-item
        :key="record.key"
        :selectItem.sync="selectItem"
        :record="record"
        :config="config"
        @handleSelectItem="handleSelectItem"
        @handleCopy="$emit('handleCopy')"
        @handleDelete="$emit('handleDelete')"
      />
      <!-- @handleDelete="$emit('handleDelete')" -->
      <!-- @handleShowRightMenu="$emit('handleShowRightMenu')" -->
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import draggable from "vuedraggable";
import FormItem from "@/components/FormDesign/mainPage/FormItem.vue";
import {
  lsitType,
  customEventType,
  selectItemType,
  configType,
} from "@/components/FormDesign/config/interfaceConfig";

@Component({
  components: {
    draggable,
    FormItem,
  },
})
export default class BaseItems extends Vue {
  @Prop({ required: true }) public record!: lsitType;
  @Prop({ required: true }) public selectItem!: selectItemType;
  @Prop({ required: true }) public config!: configType;

  created(): void {
    // console.log(this.record, 'aaa');
    // this.list = []
  }
  handleStart(e: customEventType, list: lsitType[]): void {
    // console.log(e.oldIndex, list);
    // console.log(e)
    // this.$emit("start", list[e.oldIndex].type);~
  }
  handleSelectItem(record: lsitType): void {
    this.$emit("handleSelectItem", record);
  }
}
</script>

<style scoped>
</style>